<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="900" height="900"></canvas>
<script>
  // 1.找到画布
  var myCan = document.getElementById("myCanvas");
  // 2.设置画笔
  var ct = myCan.getContext("2d");

  // 1.绘制线段
  ct.beginPath();
  ct.moveTo(10,20);
  ct.lineTo(500,500);
  ct.strokeStyle="red";
  ct.lineWidth=3;
  ct.stroke();
  ct.closePath();
  // 2.绘制圆
  ct.beginPath();
  ct.arc(500,500,200,0,2*Math.PI,false);
  ct.strokeStyle="blue";
  ct.lineWidth=5;
  ct.fillStyle="yellow";
  ct.fill();
  ct.stroke();
  ct.closePath();
  // 2-1绘制圆弧
  ct.beginPath();
  ct.arc(100,100,200,0,60*Math.PI/180,false);
  // ct.moveTo()
  ct.strokeStyle="aqua";
  ct.lineWidth=5;
  ct.fillStyle="yellow";
  ct.fill();
  ct.stroke();
  ct.closePath();

  ct.beginPath();
  ct.arc(50,50,200,0,60*Math.PI/180,false);
  // ct.moveTo()
  ct.strokeStyle="green";
  ct.lineWidth=5;
  ct.fillStyle="yellow";
  ct.fill();
  ct.closePath();
  ct.stroke();
  // 3.绘制矩形
  // 3-1绘制原始方法绘制
  ct.beginPath();
  ct.moveTo(10,10);
  ct.lineTo(300,10);
  ct.lineTo(300,200);
  ct.lineTo(10,200);
  ct.lineTo(10,10);
  ct.strokeStyle="pink";
  ct.lineWidth=5;
  ct.fillStyle="aqua";
  ct.fill();
  ct.stroke();
  ct.closePath();
  // 3-2.ct.rect(x,y,w,h);绘制矩形边框
  ct.beginPath();
  ct.rect(20,20,300,400);
  ct.strokeStyle="orangered";
  ct.lineWidth=3;
  ct.stroke();
  ct.closePath();
  // 3-3.ct.fillRect(x,y,w,h);绘制填充矩形
  ct.beginPath();
  ct.fillStyle="pink";
  ct.fillRect(50,50,400,300);
  ct.stroke();
  cr.closePath();
</script>
</body>
</html>
